<template>
  <div class="header" v-loading.fullscreen.lock="loading">
      <div>
          <el-carousel :interval="5000" arrow="always" loop autoplay direction="horizontal" :height="bannerHeight+'px'">
            <el-carousel-item v-for="(item,index) in lunbo_img" :key="index">
              <img ref="bannerHeight"  :src="item.imagpath"  @load="imgLoad"/>
            </el-carousel-item>
          </el-carousel>
        </div>

        <div class="box">
          <div class="box1">
            <div class="box1_1">
              <div class="box1_2"><span class="box1_21">研究院新闻</span></div>
              <div class="box1_2" @click="yanjiu">更多>></div>
            </div>

            <div class="box2">
              <img src="@/assets/img/fa2.jpg"/>
              <div class="box_0">
                <div class="box2_1" v-for="(item,index) in yanjiuxinwen" :key="index" @click="yanjiuxinwen1(item.id,item.model)">
                  <div class="box2_2"><span class="el-icon-arrow-right"></span>{{item.title}}</div>
                  <div class="box2_3">{{item.creatime}}</div>
                </div>
              </div>
            </div>
          </div>


          <div class="hengtu">
            <img src="@/assets/img/schoollife.jpg"/>
          </div>

          <div class="box3">
            <div class="box3_1">
              <div class="box3_11">
                <div class="box3_111">学术动态</div>
                <div class="box3_112" @click="result_nav">更多>></div>
              </div>
              <div class="box3_12" v-for="(item,index) in shuju1" :key="index">
                <div class="box3_13" @click="nav(item.id)">
                  <div class="title">{{item.title}}</div>
                 <div class="time">{{item.creatime}}</div>
                </div>
              </div>
            </div>
            <div class="box3_2">
              <div class="box3_21">快速链接</div>
               <div class="box4">
                 <div class="box3_22">
                <div class="box3_222">
                  <i class="el-icon-sell"></i>
                </div>
                <a href="https://www.yulinu.edu.cn/index.htm" class="box3_221">翱翔门户</a>
              </div>

              <div class="box3_22">
                <div class="box3_222">
                  <i class="el-icon-message"></i>
                </div>
                <a href="http://mail.yulinu.edu.cn/" class="box3_221">联系我们</a>
              </div>

              <div class="box3_22">
                <div class="box3_222">
                  <i class="el-icon-house"></i>
                </div>
                <a href="https://xxgc.yulinu.edu.cn/" class="box3_221">研究中心</a>
              </div>

              <div class="box3_22">
                <div class="box3_222">
                  <i class="el-icon-coordinate"></i>
                </div>
                <a href="https://rsc.yulinu.edu.cn/" class="box3_221">教师资料</a>
              </div>
               </div>

            </div>
          </div>

          <div class="friend">
               <div class="friend_1">友情链接</div>
               <div class="friend_2">
                  <ul v-for="(item,index) in friend" :key="index">
                    <li><a :href="item.url">{{item.name}}</a></li>
                  </ul>
               </div>
          </div>
        </div>
  </div>
</template>

<script>
import '@/assets/js/index.js'
import {result,particle,lunbo,imgsrcip} from '@/api/apis.js'
export default {
  data(){
    return{
      imgsrc:[],
      loading:true,
     friend:[
       {
         name:'中国工程院',
         url:"https://www.cae.cn/"
       },
       {
         name:'中国科学院',
         url:"https://www.cas.cn/"
       },
       {
         name:'中华人民共和国科学技术部',
         url:"http://www.most.gov.cn/index.html"
       },
       {
         name:'国家自然科学基金委员会',
         url:"https://www.nsfc.gov.cn/"
       },

       {
         name:'中华人民共和国教育部',
         url:"http://www.moe.gov.cn/"
       },
       {
         name:'中国科学技术协会',
         url:"https://www.cast.org.cn/"
       },
       {
         name:'榆林学院',
         url:"https://www.yulinu.edu.cn/index.htm"
       },
     ],
      bannerHeight:"",
       query:{
                limit:5,
                page:1,
                title:''
        },
        query1:{
                count:6
        },
        shuju1:[],
        val:false,
        yanjiuxinwen:[],
        lunbo_img:[]
    }
  },
  created(){
    this.shuju()
    this.qianwu()
    this.lunbo1()
  },
  mounted(){
    this.imgLoad()
    window.addEventListener('resize',()=>{
      //  console.log(this.$refs.bannerHeight)
      this.bannerHeight=this.$refs.bannerHeight[0].height
     
      this.imgLoad();
    },false)
  },
  methods:{
    imgLoad(){
      this.$nextTick(()=>{
        this.bannerHeight=this.$refs.bannerHeight[0].height
      })
    },
   shuju(){
      result(this.query).then(res=>{
          // console.log(res.data.data.records)
          this.shuju1=res.data.data.records
          // console.log( this.shuju1)
          res.data.data.records.forEach(item => {
              item.creatime=item.creatime.split(' ')[0]
          });
          this.loading=false
      })
   },
   nav(id){
    //  console.log(id)
      // this.$emit('getstate',this.val)
    //  this.$router.push({
    //    name:'/Technoge_detail',
    //    params:{
    //      id
    //    }
    //  })
    this.$router.push({
      path:'/Technoge_detail',
      query:{
        id
      }
    })
   },
  async qianwu(){
          const {data:res} =await particle(this.query1)        
          res.data.forEach(item => {
              item.creatime=item.creatime.split(' ')[0]
          });
           this.yanjiuxinwen=res.data
   },
   result_nav(){
     this.$router.push({
       path:'/Technoge',
     })
   },
   yanjiu(){
    //  this.$emit('getstate',this.val)
     this.$router.push({
       path:'/graduate',
     })
   },
   yanjiuxinwen1(id,model){
      // console.log(id,model)
      // this.$emit('getstate',this.val)
    //   this.$router.push({
    //    name:'/Colleage_detail',
    //    params:{
    //      id
    //    }
    //  })
    this.$router.push({
      path:'/Colleage_detail',
      query:{
        id
      }
    })
       
   },
   lunbo1(){
      lunbo().then(res=>{
        res.data.data.forEach(item=>{
            item.imagpath=imgsrcip+item.imagpath
        })
        this.lunbo_img=res.data.data
        
      })
   }
    
  }

}
</script>

<style lang="less" scoped>
*{
  margin: 0;
  padding: 0;
}
ul{
  li{
    list-style: none;
    a{
      text-decoration: none;
      color:black ;
    }
  }
}
a{
      text-decoration: none;
      color:black ;
    }
  .el-carousel__item img{
    width: 100%;
    // height: ;

    margin: 0;
  }
  .header{
    
    .box{
      //  margin:.125rem 0 .125rem 0;
      font-size: .3125rem;
        width: 11.25rem;
        margin:0 auto;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        .hengtu{
          width: 100%;
          padding-left: .05rem;
          img{
            width: 100%;
          }
        }
      .box1{
        
        .box1_1{
          display: flex;
          justify-content: space-between;
          border-bottom: 1px solid rgb(193, 75, 6);
          .box1_2{
            cursor: pointer;
            // width: 50%;
            height:.625rem;
            color: transparent;
            background-image: linear-gradient(to right,rgba(79, 9, 30, 0.6),rgba(78, 5, 5,0.6),rgba(97, 14, 108, 0.7));
            background-clip: text;
            -webkit-background-clip: text;
            font-size: .3125rem;
            -webkit-text-fill-color: transparent;
            text-align: center;
            line-height: 0.5rem;
            // background-color: red;
            .box1_21{
              
              // background: rgba(24, 143, 30, 0.5);
            }
          }
        }

        .box2{
          width: 11.25rem;
            margin:0 auto;
            padding: .1rem;
            display: flex;
               img{
                    width: 3.75rem;
                    flex:1;
                  }
            .box_0{
            display: flex;
             flex: 2;
            flex-direction: column;
            justify-content: space-around;
            .box2_1{
            display: flex;
            color: #575757;
            font-size:.25rem;
            // border: 1px solid red;
            margin:0 .1rem .1rem .1rem;
            justify-content: space-between;
            border-bottom:1px solid transparent;
            cursor: pointer;
            .box2_2{
              width: 5.625rem;
              white-space:nowrap;
              overflow:hidden;
              text-overflow:ellipsis;
            }
            
            .box2_3{
              color: #c7c3c3;
            }
          }

          .box2_1:hover{
              // border-bottom:1px solid rgb(193, 75, 6);
              color: #ffc653;
              // margin-left:.06rem;

               .box2_3:hover{
              color: #ffc653;
            }
            }
            
          }
          
          
        }
      }

      .box3{
        display: flex;
        justify-content: space-between;
        .box3_1{
          display: flex;
          flex: 3;
          flex-direction: column;
          .box3_11{
            display: flex;
            justify-content: space-between;
             height:.625rem;
            background-image: linear-gradient(to right,rgba(79, 9, 30, 0.6),rgba(78, 5, 5,0.6),rgba(97, 14, 108, 0.7));
            background-clip: text;
            font-size: .3125rem;
            -webkit-text-fill-color: transparent;
            text-align: center;
            border-bottom: 1px solid rgb(193, 75, 6);
            line-height: 0.5rem;
            .box3_111{}
            .box3_112{
              cursor: pointer;
            }

          }
          .box3_12{
             font-size: .25rem;
             color: #575757;
             .box3_13{
               cursor: pointer;
                display: flex;
              justify-content: space-between;
               height: 0.5rem;
               line-height: 0.5rem;
               border-bottom: 1px dashed #575757;
               
               .title{
                 width: 6.25rem;
                 white-space:nowrap;
                 overflow:hidden;
                 text-overflow:ellipsis;
               }
               .time{
                 color:#c7c3c3;
               }
             }
             .box3_13:hover{
               background-color: rgb(227, 226, 226,.1);
             }
          }
        }
        .box3_2{
          flex: 1;
          margin-left: .5rem; 
          // border-left: .05rem solid rgb(222, 218, 218);
          .box4{
            display: flex;
            flex-direction: column;
            justify-content: space-around;
          }
            .box3_21{
                    // padding-left: 1.6rem;
                    text-align: right;
                     height:.625rem;
                    background-image: linear-gradient(to right,rgba(113, 7, 102, 0.6),rgba(78, 5, 5,0.6),rgba(97, 14, 108, 0.7));
                    background-clip: text;
                    font-size: .3125rem;
                    -webkit-text-fill-color: transparent;    
                    border-bottom: 1px solid rgb(193, 75, 6);
                    line-height:.5rem;     
                }
            .box3_22{
              display: flex;
              justify-content: space-between;
              // background-color: #f7f7f7;
              // vertical-align: middle;
              cursor: pointer;
              height:.6rem;
              border-bottom: 1px dashed #575757;
               line-height: 0.625rem;
              //  background-color: #f7f7f7;    
              // .box3_22{
                //  vertical-align: middle;
                  text-align: center;

              // }
              
            }
            .box3_22:hover{
                background: rgb(227, 226, 226,.1);
              }
        }
      }

        .friend{
            .friend_1{
                height:.625rem;
                background-image: linear-gradient(to right,rgba(79, 9, 30, 0.6),rgba(78, 5, 5,0.6),rgba(97, 14, 108, 0.7));
                background-clip: text;
                font-size: .3125rem;
                -webkit-text-fill-color: transparent;
                // text-align: center;
                line-height: 0.5rem;
                border-bottom: 1px solid rgb(193, 75, 6);
            }
            .friend_2{
              display: flex;
              // justify-content: space-around;

              margin: .1rem 0 .1rem 0;
              flex-wrap: wrap;
                ul{
                  
                display: flex;
                  li{
                    height: .35rem;
                    line-height: .35rem;
                    padding:0 .1rem 0 .21rem;
                    margin: .1rem;
                    font-size: .2rem;
                    // border:1px dashed #575757;
                    border-left: .0125rem solid red;
                  }
                  li:hover{
                    background-color: rgb(227, 226, 226,.1);
                  }
                }
                
            }
        }
    }
  }
</style>